<template>
<div class="app-container">
  <h3>App.vue根组件</h3>
  <a href="#/home">首页</a>
  <a href="#/movie">电影</a>
  <a href="#/about">关于</a>
  <hr/>
  <component :is="comName"></component>

</div>
</template>

<script>
import About from "@/components/About.vue"
import Home from "@/components/Home.vue"
import Movie from "@/components/Movie.vue"
export default {
  name: 'App',
  data() {
    return {
      //在动态组件中，要展示的组件的名称
      comName: 'Home'
    }
  },
  created() {
    //只要当前App.vue组件一被创建，就立即监听window对象的onhashchange时间
    window.onhashchange = () => {
      this.comName = location.hash.substr(2)
    }
  },
  components: {
    About,
    Home,
    Movie
  }
}
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #bfbebe;
}
a {
  margin-right: 10px;
}
</style>
